<template>
  <div id="app">
  </div>
  <router-view />
</template>


<script setup>
import { onMounted, ref, watch, nextTick, provide } from "vue"
import { renderPop2 } from './components/pop'
import { sendToUeMsg } from '@/utils/UeMessageUtils'
import eventBus from './utils/EventBus.js';
// import { useRoute } from 'vue-router'
// const route = useRoute();

onMounted(() => {
  document.getElementById("playerUI").style.display = "block";

  window.addEventListener("load", () => {
    window?.loads(); //webrtc
  });

  window?.addResponseEventListener("printMessage", (data) => {
    console.log("接收到消息", data)
    data = eval("[{" + data + "}]");
    console.log("接收到消息", data);
    console.log(data[0].EquipmentID, '接收到消息');
    eventBus.emit('tabData', data); // 发送事件到其他组件
    if (data[0].EquipmentID === '1') { //判断条件 
      renderPop2()
    }
  });

  // window.addEventListener('keyup', handleKeyUp);
});

// const handleKeyUp = (eve) => {
//   console.log(eve.key, '++++');
//   sendToUeMsg({
//     type: eve,
//   })
// }

</script>

<style>
#app {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
  /* background: #bebebe; */

}
</style>
<style lang="scss" scoped>
.mainContainer {
  position: relative;
  // margin-top: 90px;

  &-tabBar {
    width: 352px;
    height: 176px;
    position: fixed;
    pointer-events: all;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    &-tabBarBox {
      width: 352px;
      height: 176px !important;
      display: inline-block;
      position: relative;
      z-index: 999;

      &-overall2 {
        width: 142px;
        height: 148px;
        background-image: url("./assets/images/home/01.png");
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        //transform: translateX(-50%);
      }

      &-three2 {
        width: 180px;
        height: 117px;
        background-image: url("./assets/images/home/02.png");
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: 49.5%;
        transform: translateX(-49.5%);
      }

      &-synthesis2 {
        width: 144px;
        height: 147px;
        background-image: url("./assets/images/home/03.png");
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
        right: 0;
      }

      &-Unchecked {
        width: 322px;
        height: 160px;
        //position: absolute;
        //bottom: 0;
        //left: 50%;
        //transform: translateX(-50%);
        position: relative;
        margin: 16px;
        transition: all .2s;


        &-overall {
          width: 122px;
          height: 135px;
          background-image: url("./assets/images/home/1.png");
          background-size: 100% 100%;
          position: absolute;
          left: 0;
          bottom: 0;
          transition: all .2s;

        }

        &-three {
          width: 165px;
          height: 100px;
          background-image: url("./assets/images/home/2.png");
          background-size: 100% auto;
          position: absolute;
          top: 0;
          left: 49.5%;
          transform: translateX(-50%);
          transition: all .2s;

        }

        &-synthesis {
          width: 122px;
          height: 135px;
          background-image: url("./assets/images/home/3.png");
          background-size: 100% auto;
          position: absolute;
          right: 0;
          bottom: 0;
          transition: all .2s;

        }

        &-menu {
          width: 99px;
          height: 49.5px;
          background-image: url("./assets/images/home/4.png");
          background-size: 100%;
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }
      }
    }
  }

  &-bottomBac {
    position: fixed;
    bottom: 0;
    width: 1920px;
    height: 32px;
    background-image: url("./assets/images/home/bgc_decorate.png");
    background-size: 100% 100%;
    z-index: -1;
  }
}
</style>
